import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as actions from '../store/actions/todo.actions'


function Footer(props) {
    const num = props.todos.filter(item => !item.isCompleted).length
    function clear_todo(todos) {
        if (window.confirm("是否删除已完成的任务")) {
            props.clear_active_todo(todos.filter(item =>
                item.isCompleted === true
            ))

        }
    }
    return (
        <footer className="footer">
            <span className="todo-count">
                <strong>{num}</strong> {num === 1 || num === 0 ? "item" : "items"} left
				</span>
            <ul className="filters">
                <li>
                    <span onClick={() => { props.modify_actives_todo('all') }}>All</span>
                </li>
                <li>
                    <span onClick={() => { props.modify_actives_todo('active') }}>Active</span>
                </li>
                <li>
                    <span onClick={() => { props.modify_actives_todo('completed') }}>Completed</span>
                </li>
            </ul>
            <button className="clear-completed" onClick={() => { clear_todo(props.todos) }}>Clear completed</button>
        </footer>
    );
}

const mapFooterProps = state => ({
    todos: state.todoReducer.todos,
    filter: state.todoReducer.filter
})
const mapFooterActions = dispatch => ({
    ...bindActionCreators(actions, dispatch)
})

export default connect(mapFooterProps, mapFooterActions)(Footer)
